/* Copyright (c) 2024 Huawei Technologies Co., Ltd.
openFuyao is licensed under Mulan PSL v2.
You can use this software according to the terms and conditions of the Mulan PSL v2.
You may obtain a copy of Mulan PSL v2 at:
         http://license.coscl.org.cn/MulanPSL2
THIS SOFTWARE IS PROVIDED ON AN 'AS IS' BASIS, WITHOUT WARRANTIES OF ANY KIND,
EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
See the Mulan PSL v2 for more details. */

import BreadCrumbCom from '@/components/BreadCrumbCom';
import { useHistory } from 'inula-router';
import '@/styles/cololcationOverview.less';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Drawer } from 'antd';
import useLocalStorage from '@/hooks/useLocalStorage';
import { useEffect, useState } from 'openinula';
import overviewStep1 from '@/assets/images/overviewStep1.png';
import overviewStep2 from '@/assets/images/overviewStep2.png';
import overviewStep3 from '@/assets/images/overviewStep3.png';
import overviewStep4 from '@/assets/images/overviewStep4.png';
import overviewStepDark1 from '@/assets/images/overviewStepDark1.png';
import overviewStepDark2 from '@/assets/images/overviewStepDark2.png';
import overviewStepDark3 from '@/assets/images/overviewStepDark3.png';
import overviewStepDark4 from '@/assets/images/overviewStepDark4.png';
import { workload, newEnvPrepare } from '@/assets/md';
import { skipSendMainMsg } from '@/tools/utils';

import PriorityPreemption from '@/components/PriorityPreemption';

export default function ColocationOverviewPage() {
  const [currentTheme, setCurrentTheme] = useLocalStorage('theme', 'light');
  const history = useHistory();
  const [className, setClassName] = useState('');
  const [open, setOpen] = useState(false);
  const showDrawer = (data, temporyClass = '') => {
    setClassName(temporyClass);
    setExplanatoryInfo(data);
    setOpen(true);
  };
  const onClose = () => {
    setOpen(false);
  };
  const isIndependence = !window.location.href.includes('container_platform');
  const [explanatoryInfo, setExplanatoryInfo] = useState();
  const overviewData = [
    {
      index: 1,
      img: currentTheme === 'light' ? overviewStep1 : overviewStepDark1,
      title: '环境准备',
      desc: '开启节点上的在离线混部功能需要修改kubelet、containerd配置。',
      link: '',
      path: '',
      className: 'break_code_md_body',
      showDrawers: true,
      md: newEnvPrepare,
    },
    {
      index: 2,
      key: 'configuration',
      img: currentTheme === 'light' ? overviewStep2 : overviewStepDark2,
      title: '混部策略配置',
      desc: '配置混部节点以保证对应节点开启混部功能；配置混部QoS保障、调度、驱逐相关参数。',
      link: '配置混部策略 >',
      path: '/ColocationConfiguration',
      href: '/container_platform/colocation/ColocationConfiguration',
      showDrawers: false,
      md: '',
    },
    {
      index: 3,
      key: 'pod',
      img: currentTheme === 'light' ? overviewStep3 : overviewStepDark3,
      title: '工作负载部署',
      desc: '在资源管理中部署工作负载，使用混部能力。',
      link: '部署工作负载 >',
      path: '/workload/pod',
      href: '/container_platform/workload/pod',
      showDrawers: true,
      md: workload,
    },
    {
      index: 4,
      key: 'ColocationMonitor',
      img: currentTheme === 'light' ? overviewStep4 : overviewStepDark4,
      title: '在离线混部监控',
      desc: '查看集群中混部节点、pod数量；以及正常CPU、内存资源和超卖CPU、内存资源使用情况。',
      link: '查看在离线混部监控 >',
      path: '/ColocationMonitor',
      href: '/container_platform/colocation/ColocationMonitor',
      showDrawers: false,
      md: '',
    },
  ];
  const goOtherPage = (e, data) => {
    skipSendMainMsg(e, data.key, data.path, history, !data.showDrawers);
  };
  useEffect(() => {
  }, []);
  return (
    <div id="colocation_overview" className="colocation_overview">
      <BreadCrumbCom className="create_bread" items={[
        { title: '在离线混部', path: '/colocation/ColocationOverview' },
        { title: '概览', path: '/' },
      ]} />
      <div className="colocation_overview_content">
        <div className="colocation_overview_content_banner">
          <p className="colocation_overview_content_banner_title">在离线混部</p>
          <p className="colocation_overview_content_banner_desc">支持在线/离线业务混合部署，保障在线业务在使用高峰时期的调度与对离线业务的压制，同时使能离线业务在在线业务低谷时期使用超卖资源提升集群的资源利用率</p>
        </div>
        <div className="colocation_overview_content_process">
          <div className="colocation_overview_content_process_all">
            {overviewData.map(item => (
              <div className="colocation_overview_content_process_single">
                <img src={item.img} alt="" className="colocation_overview_content_process_single_img" />
                <div>
                  <div className="colocation_overview_content_process_single_rightTop">
                    <p className="colocation_overview_content_process_single_rightTop_num">{item.index}</p>
                    <p className="colocation_overview_content_process_single_rightTop_title">{item.title}</p>
                    <QuestionCircleOutlined className='question-icon-hover' onClick={() => showDrawer(item.md, item.className)} style={{ marginLeft: '7px', display: item.showDrawers ? 'flex' : 'none' }} />
                  </div>
                  <p className="colocation_overview_content_process_single_rightBottom">{item.desc}<a href={item.href} style={{ display: item.index === 3 && isIndependence ? 'none' : 'inline-block' }} onClick={e => goOtherPage(e, item)} className="colocation_overview_content_process_single_rightBottom_link">{item.link}</a></p>
                </div>
              </div>
            ))}
          </div>
          <Drawer
            title=""
            placement="right"
            closable={false}
            onClose={onClose}
            width={600}
            open={open}
            getContainer={() => document.getElementById('colocation_overview')}
          >
            <PriorityPreemption className={className} onClose={onClose} data={explanatoryInfo} />
          </Drawer>
        </div>
      </div>
    </div>
  );
};